$.fn.extend({
	maskMove: function(opt) {

		var container = this,
			_ConWidth = container.width(),
			_ConHeight = container.height(),
			_ConPosX = _ConWidth / 2,
			_ConPosY = _ConHeight / 2;
		var img = container.children("img"),
			imgWidth = img.width(),
			imgHeight = img.height();
		container.css({
			width: imgWidth,
			height: imgHeight
		})

		var mask = opt.mask,
			_MskWidth = _ConWidth,
			_MskHeight = _ConHeight;
		mask.css({
			position: "absolute",
			width: _MskWidth,
			height: _MskHeight,
			backgroundColor: opt.bgColor || "rgba(0, 0, 0, 0.2)"
		})


		

		var eventType = "",
			direct = "";

		container.on("mouseenter mouseleave", function(e) {
			var mouseX = e.offsetX,
				mouseY = e.offsetY;
			var deg = Math.atan((_ConPosX - mouseX) / (_ConPosY - mouseY)) * 180 / Math.PI;
			if (deg > -45 && deg < 45 && mouseY > _ConPosY) {
				direct = "bottom";
			}
			if (deg > -45 && deg < 45 && mouseY < _ConPosY) {
				direct = "top";
			}
			if (((deg < -45 && deg > -90) || (deg > 45 && deg < 90)) && mouseX < _ConPosX) {
				direct = "left";
			}
			if (((deg < -45 && deg > -90) || (deg < 90 && deg > 45)) && mouseX > _ConPosX) {
				direct = "right";
			}
			fnMove(mask, e.type, direct);
		});

		var fnMove = function(mask, eventType, direct) {
			if (eventType == "mouseenter") {
				switch (direct) {
					case "bottom":
						mask.css({
								left: 0,
								top: _ConHeight
							})
							.stop(true, true)
							.animate({
								top: 0
							}, 200);
						break;
					case "top":
						mask.css({
								left: 0,
								top: -_ConHeight
							})
							.stop(true, true)
							.animate({
								top: 0
							}, 200);
						break;
					case "left":
						mask.css({
								left: -_ConWidth,
								top: 0
							})
							.stop(true, true)
							.animate({
								left: 0
							}, 200);
						break;
					case "right":
						mask.css({
								left: _ConWidth,
								top: 0
							})
							.stop(true, true)
							.animate({
								left: 0
							}, 200);
						break;
				}
			} else {
				switch (direct) {
					case "bottom":
						mask.stop(true, true).animate({
							top: _ConHeight
						}, 200);
						break;
					case "top":
						mask.stop(true, true).animate({
							top: -_ConHeight
						}, 200);
						break;
					case "left":
						mask.stop(true, true).animate({
							left: -_ConWidth
						}, 200);
						break;
					case "right":
						mask.stop(true, true).animate({
							left: _ConWidth
						}, 200);
						break;
				}
			}
		}
	}
});